<template>
    <div class="main">
        <div class="main-top">
            <p>
                <el-button text @click="dialogFormVisible = true">修改资料</el-button>
            </p>
        </div>
        <div class="main-bottom">
            <div class="main-bottom-left">
                <el-avatar shape="square" :size="180"
                    :src="`http://xawn.f3322.net:8002/distremote/static/avatar/${userInfo.photoPath}`" />
                <el-button type="primary" @click="dialogTableVisible = true">
                    修改头像<el-icon class="el-icon--right">
                        <Upload />
                    </el-icon>
                </el-button>
            </div>
            <div class="main-bottom-right">
                <p>账户：{{ state.data1.username }}</p>
                <p>角色：{{ state.data1.roleId == 1 ? '管理员' : (state.data1.roleId == 2 ? '注册用户' : (state.data1.roleId == 72
                        ? '普通用户' : '商户'))
                }}
                </p>
                <p>性别：{{ state.data1.ssex == 0 ? '男' : (state.data1.ssex == 1 ? '女' : '保密') }}</p>
                <p>电话：{{ state.data1.mobile }}</p>
                <p>邮箱：{{ state.data1.email }}</p>
                <p>部门：
                    {{ state.data1.deptId == 1 ? '开发部' : (state.data1.deptId == 2 ? '开发一部' : (state.data1.deptId == 3 ?
                            '开发二部' : (state.data1.deptId == 4 ? '市场部' : (state.data1.deptId == 5 ? '人事部' : '测试部'))))
                    }}
                </p>
                <p>描述：-</p>
            </div>
        </div>

        <el-dialog v-model="dialogFormVisible" title="修改资料">
            <el-form :model="form">
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form.email" autocomplete="off" />
                </el-form-item>
                <el-form-item label="手机" :label-width="formLabelWidth">
                    <el-input v-model="form.mobile" autocomplete="off" />
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-select v-model="form.deptId" placeholder="请选择部门">
                        <el-option v-for="item in state.deptData" :key="item.key" :label="item.text"
                            :value="Number(item.value)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" style="margin-left: 100px;">
                    <el-radio-group v-model="form.ssex">
                        <el-radio label="0" value="0">
                            男
                        </el-radio>
                        <el-radio label="1" value="1">
                            女
                        </el-radio>
                        <el-radio label="2" value="2">
                            保密
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="realOK()">确认</el-button>
                </span>
            </template>
        </el-dialog>


        <el-dialog v-model="dialogTableVisible" title="选择头像">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane class="icon-group" label="后田花子" name="first">

                    <el-avatar v-for="(item, index) in hanada"
                        shape="square" :size="90" :src="`http://xawn.f3322.net:8002/distremote/static/avatar/${item}`"
                        @click="changeImg(item)" />

                </el-tab-pane>
                <el-tab-pane label="阿里" name="second">Config</el-tab-pane>
                <el-tab-pane label="脸萌" name="third">Role</el-tab-pane>
            </el-tabs>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { Upload } from '@element-plus/icons-vue';
import type { TabsPaneContext } from 'element-plus'
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { getDeptApi } from '../apis/dept'
import { changeUserDataApi, getUserDataApi, changeImgApi } from '../apis/user'
import { useInfoStore } from '../store';

const userInfo = useInfoStore()

const state = reactive({
    data1: JSON.parse(localStorage.getItem('user') as any),
    deptData: [] as any,
});
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const dialogTableVisible = ref(false)
let dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    email: state.data1.email,
    mobile: state.data1.mobile,
    ssex: state.data1.ssex,
    userId: state.data1.userId,
    deptId: state.data1.deptId,
    roleId: state.data1.roleId,
    status: state.data1.status,
    username: state.data1.username,
})
//花田
const hanada = ref(["default.jpg", "1d22f3e41d284f50b2c8fc32e0788698.jpeg", "2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg", "2dd7a2d09fa94bf8b5c52e5318868b4df.jpg", "8f5b60ef00714a399ee544d331231820.jpeg", "17e420c250804efe904a09a33796d5a10.jpg", "17e420c250804efe904a09a33796d5a16.jpg", "87d8194bc9834e9f8f0228e9e530beb1.jpeg", "496b3ace787342f7954b7045b8b06804.jpeg", "595ba7b05f2e485eb50565a50cb6cc3c.jpeg", "964e40b005724165b8cf772355796c8c.jpeg", "5997fedcc7bd4cffbd350b40d1b5b987.jpg", "a3b10296862e40edb811418d64455d00.jpeg", "5997fedcc7bd4cffbd350b40d1b5b9824.jpg", "a43456282d684e0b9319cf332f8ac468.jpeg", "bba284ac05b041a8b8b0d1927868d5c9x.jpg", "c7c4ee7be3eb4e73a19887dc713505145.jpg", "ff698bb2d25c4d218b3256b46c706ece.jpeg"])
async function getDept() {
    const res = await getDeptApi();
    console.log("dept", res);
    state.deptData = res.rows.children
}
async function changeData(data: string) {
    const res = await changeUserDataApi(data);
    console.log(res);
    if (res == "") {
        ElMessage.success("个人信息修改成功")
        getUser()
    }
}
async function getUser() {
    const res = await getUserDataApi();
    console.log(res);
    localStorage.user = JSON.stringify(res);
    state.data1 = JSON.parse(localStorage.getItem('user') as any)
    userInfo.photoPath = JSON.parse(localStorage.getItem('user') as any).avatar



}
async function changeImg(img: any) {
    const a = `username=${form.username}&avatar=${img}`
    const res = await changeImgApi(a);
    console.log(res);
    if (res == "") {
        state.data1.avatar = img
        getUser()
        dialogTableVisible.value = false
        ElMessage.success("头像修改成功")

    } else {
        ElMessage.error("头像修改失败")
    }
}
function realOK() {
    console.log(123);
    dialogFormVisible.value = false
    const a = `ssex=${form.ssex}&roleId=${form.roleId}&status=${form.status}&email=${form.email}&userId=${form.userId}&username=${form.username}&mobile=${form.mobile}&deptId=${form.deptId}`
    console.log(form);

    changeData(a)
}

onMounted(() => {
    getDept();
})
</script>

<style scoped lang="less">
.main {
    width: 100%;
    height: 300px;
    // background-color: skyblue;
    margin: 0 auto;
    border: 1px solid #ccc;

    .main-top {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ccc;

        p {
            float: right;
            margin-right: 40px;
            // margin-top: 15px;
        }

        .el-button {
            margin: 10px;
        }
    }

    .main-bottom {
        width: 100%;
        height: 250px;
        display: flex;

        .main-bottom-left {
            width: 200px;
            height: 100%;
            // background-color: coral;
            margin: 0 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
        }

        .main-bottom-right {
            width: 300px;
            height: 100%;
            // background-color: bisque;

            p {
                margin: 10px 10px;
            }
        }
    }

    .el-button--text {
        margin-right: 15px;
    }

    .el-select {
        width: 300px;
    }

    .el-input {
        width: 300px;
    }

    .dialog-footer button:first-child {
        margin-right: 10px;
    }

    .demo-tabs>.el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
}

.icon-group {
    display: flex;
    flex-wrap: wrap;

    .el-avatar {
        margin: 10px 13px;
    }
}
</style>